<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=400">
		<link rel="stylesheet" href="../style.css">
		<script>
		function $(id) {
			return document.getElementById(id);
		}
		function play(id) {
			$("duration").innerHTML = $(id).duration;
			setInterval(function() {
				$("currentTime").innerHTML = $(id).currentTime;
			}, 1000/30);
			$(id).play();
		}
		function pause(id) {
			$(id).pause();
		}
		function fullscreen(id) {
			$(id).webkitRequestFullScreen();
		}
		</script>
		<style>
		:-webkit-full-screen {
			width: 100%;
			height: 100%;
		}
		</style>
		<title>Video</title>
	</head>
	<body>
		<dl>
			<dt>mp4</dt>
			<dd>
				<div id="v1c">
					<video id="v1" width="352"  height="288" src="sample.mp4" poster="sample.png">
					<p>Video disabled</p>
					</video>
					<p><a href="javascript:play('v1')">[Play]</a> <a href="javascript:pause('v1')">[Pause]</a> <a href="javascript:fullscreen('v1c')">[Fullscreen]</a></p>
					<p><span id="currentTime">0</span><br>/ <span id="duration">0</span></p>
				</div>
			</dd>
		</dl>
	</body>
</html>
